<template>
  <div id="app">
<!--    <h2>{{mess}}</h2>-->

    <img src="./assets/logo.png">
    <!--自定义时这不能漏 如果将哪个组件作为父组件这个千万不能漏★★★ -->
    <!-- router-link自带的 类似超链接a标签  导向组件的
     tag="button"变成button按钮...
     replace必须点击它才能回到这个页面(禁止forward 禁止back)
     active-class="active" 点击添加类
     -->
 <!--   <router-link to="/1" tag="button" replace active-class="active">helloWorld1</router-link>
    <router-link to="/2" tag="button" replace active-class="active">helloWorld2</router-link>-->
 <!--   <router-link to="/1" tag="button" replace active-class="active">helloWorld1</router-link>
    <router-link to="/2" tag="button" replace active-class="active">helloWorld2</router-link>-->
    <button @click="hwclick1">helloWorld2</button>
    <button @click="hwclick2">helloWorld3</button>
<!--    往user传数据(:to动态绑定绝对后面显示userId)  params类型的传参-->
    <router-link :to="'/user/'+userId" tag="button" replace>user</router-link>
    <router-link to="/1" replace>helloWorld</router-link>
    <!--传参?之后的东西:  query传对象里面保存参数,有点像get 的req.query -->
<!--    <router-link to="/profile" replace>profile</router-link>  往profile传数据-->
    <router-link :to="{path:'/profile',query:{name:'wf',age:20,height:'180'}}" replace>profile</router-link>
    <!--  作用：往页面的什么地方渲染 ;写几个就可以渲染几个组件-->
    <!--子路由 -->
    <button @click="uclick">用户</button>
    <button @click="pclick"> 档案</button>
      <!--
      keep-alive  防止组件频繁创建和销毁
      两个属性:include,exclude(放进去的是组件的name属性)
      意思是 keep-alive对某个组件不起作用  会被重复创建与销毁
      -->
    <keep-alive exclude="profile">
      <router-view></router-view>
    </keep-alive>

<!--    <router-view></router-view>-->
  </div>
</template>

<script>
export default {
  name: 'App',
  data(){
    return{
      mess:"mess",
      //这个仅仅是为了拼接url的
      userId:"李四"
    }
  },
  methods:{
    //通过代码修改url路径
    hwclick1(){
      //this.$router拿到路由对象(new Router({}))  pushState, replace
        this.$router.push("/2").catch(err=>{})
    },
    hwclick2(){
        this.$router.push("/3").catch(err=>{})
    },
    uclick(){
        // this.$router.push("/user/"+this.userId).catch(err=>{})
         this.$router.push({
           name:'User',
           params:{
             id:this.userId
           }
         }).catch(err=>{})
    },
    pclick(){
        this.$router.push({
          path:'/profile',
          query:{
            name:"ws",
            height:159,
            age:26
          }
        }).catch(err=>{})
    }
  }
}
</script>

<style>
#app {
  font-family: 'Avenir', Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  margin-top: 60px;
}
  .active{
    color: blue;
  }
</style>
